﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/bootstrap.min.css"/>
		<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-2.2.4.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery.tips.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/bootstrap.min.js" ></script>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>云众科技网上预约挂号系统</title>
	</head>
	<style type="text/css">
		html body{
			width: 100%;
		}
		.piaoyikuang{
			border: 1px solid #66AFE9;
			border-radius: 10px;
		}
		.piaoyi{
			float: left;
			width: 100px;
			height: 30px;
			border: 0px solid #66AFE9;
			text-align: center;
		}
		.ks-left{
			border: 1px solid #66AFE9;
			border-radius: 10px;
			margin-right: 0px;
		}
		.ks-right{
			border: 0px solid #66AFE9;
			border-radius: 10px;
		}
	</style>
	<body>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:12:50
        	描述：个人中心	联系我们	登录	注册
        -->
		<div class="container">
			<nav class="nav navbar-default navbar-fixed-top container-fluid" role="navigation" style="background-color:aquamarine;">
				<div class="nav navbar-header">
					<!-- 导航头 -->
					<a class="navbar-brand" href="#">云众科技</a>
					<button class="navbar-toggle" data-toggle= "collapse" data-target="#mynav">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="mynav">
					<!-- 导航内容 -->
					<ul class="nav navbar-nav">
						<li><a href="">联系电话：0451-87362836</a></li>
						<!-- 下面的代码需要登录后才能显示 -->	
						<li><a href="<%=request.getContextPath()%>/personal/personal.jsp">个人中心</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-user"></span>欢迎您：张飞</a></li>
					</ul>
					<!-- 导航尾，登录后不再显示 -->
					<div class="nav navbar-right">
						<ul class="nav navbar-nav">
							<li><a href="<%=request.getContextPath()%>/login.jsp">登录</a></li>
							<li><a href="<%=request.getContextPath()%>/register/register.jsp">注册</a></li>
						</ul>
					</div>	
				</div>
			</nav>
		</div>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:32:38
        	描述：项目名称   搜索框 （搜索框只有游客或患者可见）
        -->
		<div class="container" style="margin-top: 50px;">
			<div class="col-sm-6" >
				<h2 class="text-primary" >云众科技网上预约挂号系统</h2>
			</div>
			
			<div class="col-sm-6" style="margin-top: 15px;">
				<form method="post" name="form1" class="form form-horizontal">
					<div class="input-group">
					     <div class="input-group-btn">
						    <button id="index_search_btn" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">科室<span class="caret"></span></button>
						       <ul class="dropdown-menu" role="menu">
						         <li><a href="#">科室</a></li>
						         <li><a href="#">疾病</a></li>
						       </ul>
					     </div><!-- /btn-group -->
					     <input type="text" class="form-control" placeholder="请输入搜索内容" >
					     <span class="input-group-addon" style="background-color:#f0ad4e;cursor: pointer;" >
						   <span class="glyphicon glyphicon-search "></span>
					     </span>
					</div>
				 </form>
			</div>
			
		</div>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日17:04:47
        	描述：导航条   游客可见(在dashboard页) ：按科室挂号  按疾病挂号  最新公告
        -->
		<div class="container" style="margin-top: 10px;">
			<ul class="nav nav-pills guahao" role="tablist" style="background-color:lightcyan">
			  	<li ><a href="/">首页</a></li>
			  	<li class="active"><a href="/depttype/query">按科室预约</a></li>
				<li ><a href="<%=request.getContextPath()%>/appointment/illness/listIllness.jsp">按疾病预约</a></li>
				<li ><a href="/listAnnouncement/query">最新公告</a></li>
			</ul>
		</div>
		<!--
        	作者：石洪刚 
        	时间：2017年8月20日21:51:22
        	描述：显示热门科室 及所有科室
        -->
        <div class="container">
        	<div class="text-left">
        		<h4 class="btn btn-warning">热门科室</h4>
        	</div>
        	<div class="piaoyikuang" style="padding: 5px;height: 100px;">
                <c:forEach items="${count}" var="count" varStatus="i">
        		<div class="piaoyi"><a href="/doctor/queryByKsId?id=${count.departmentId}">${count.departmentName}</a></div>
                </c:forEach>
        	</div>
        </div>
	<div class="container" style="margin-top: 10px;">
        <!-- 科室名称 及其 科室详细 -->
        	<div class="col-sm-3">
        		<div class="panel panel-default ks-left">
	            		<div class="panel-body">
	            			<ul class="nav nav-pills nav-stacked left_ks" role="tablist">
                                <c:forEach items="${list}" var="dept" varStatus="i">
                                    <li class=""><a href="#${i.count}">${dept.dplName}<span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
                                    </c:forEach>
	            		</div>
	                </div>

		</div>
        	<!--
            	作者：石洪刚
            	时间：2017-01-07
            	描述：科室细分
            -->
        	<div class="col-sm-9">
        		<div class="panel panel-default ks-right">

				<div class="panel-body">
        				<div class="panel panel-default">
                            <c:forEach items="${list}" var="dept" varStatus="i">
						<div class="panel-heading"><h6 id="${i.count}">${dept.dplName}</h6></div>
        					<div class="panel-body">
                                <c:forEach items="${dept.deptList}" var="de" varStatus="i">
							    <div>
					        		<div class="piaoyi"><a href="/doctor/queryByKsId?id=${de.dpId}">${de.dpName}</a></div>
					        	</div>
                                </c:forEach>

						</div>
                            </c:forEach>
					</div>

        			</div>
        		
			</div>
        	</div>
        
	</div>
	</body>
	<script type="text/javascript">
	//点击左侧科室，安装锚点找到对应的明细
    $(".left_ks a").bind("click",function(){
        $(".left_ks li").removeClass("active");
        $(this).parent().addClass("active");
    });
    </script>
</html>